<template>
  <Dialog :title="title" :model-value="visible" width="600px" :before-close="closeForm">
    <Form
      :schema="schema"
      :model="app"
      @register="formRegister"
      :isCol="false"
      label-width="120px"
      :rules="rules"
    />
    <template #footer>
      <el-space>
        <BaseButton :loading="loading" type="primary" @click="save">确定</BaseButton>
        <BaseButton @click="resetForm">重置</BaseButton>
      </el-space>
    </template>
  </Dialog>
</template>

<script>
import { DictItemDic } from '@/flow/config/flowConfig'
import { Dialog } from '@/components/Dialog'
import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
const { formRegister, formMethods } = useForm()
export default {
  components: { Dialog, Form },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    source: {
      type: Object,
      default: null
    },
    formId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      DictItemDic,
      title: '新增流程应用',
      auditDic: {
        NodeName: '节点名',
        AppName: '应用名',
        EndTime: '审核时间',
        AuditType: '审批方式'
      },
      appMsg: {
        Label: null,
        DataType: null,
        Value: null,
        ColId: null,
        Keywords: null,
        IsRow: false,
        IsRed: false,
        Show: null
      },
      id: null,
      rules: {
        Label: [
          {
            required: true,
            message: '展示文本不能为空！',
            trigger: 'blur'
          }
        ],
        DataType: [
          {
            required: true,
            message: '展示类型不能为空！',
            trigger: 'blur'
          }
        ],
        ColId: [
          {
            required: true,
            message: '请选择表单字段',
            trigger: 'blur'
          }
        ],
        Value: [
          {
            required: true,
            message: '内容不能为空！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {},
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  methods: {
    formRegister,
    initScheme() {
      const list = [
        {
          field: 'DataType',
          label: '展示类型',
          component: 'Select',
          componentProps: {
            placeholder: '展示类型',
            options: [
              {
                label: '自定义',
                value: 0
              },
              {
                label: '表单',
                value: 1
              },
              {
                label: '审批字段',
                value: 2
              }
            ],
            on: {
              change: (val) => {
                this.appMsg.DataType = val
                this.initScheme()
              }
            }
          }
        },
        {
          field: 'Label',
          label: '展示文本',
          component: 'Input',
          componentProps: {
            placeholder: '展示文本'
          }
        }
      ]
      if (this.appMsg.DataType == 0) {
        list.push({
          field: 'Value',
          label: '内容',
          component: 'Input',
          componentProps: {
            maxLength: 50,
            placeholder: '内容'
          }
        })
      } else if (this.appMsg.DataType == 1) {
        list.push({
          field: 'ColId',
          label: '选择字段',
          component: 'FormColChiose',
          componentProps: {
            formId: [this.formId],
            placeholder: '选择字段',
            on: {
              change: (val, e) => {
                if (val) {
                  this.appMsg.ColName = e.table[e.col.TableId].Label + '-' + e.col.Label
                } else {
                  this.appMsg.ColName = null
                }
              }
            }
          }
        })
        list.push({
          field: 'Keywords',
          label: '筛选方案名',
          component: 'Input',
          componentProps: {
            maxLength: 20,
            placeholder: '筛选方案名'
          }
        })
      } else if (this.appMsg.DataType == 2) {
        list.push({
          field: 'Value',
          label: '审批字段',
          component: 'Select',
          componentProps: {
            options: [
              {
                label: '节点名',
                value: 'NodeName'
              },
              {
                label: '应用名',
                value: 'AppName'
              },
              {
                label: '审核时间',
                value: 'EndTime'
              },
              {
                label: '审批方式',
                value: 'AuditType'
              }
            ],
            placeholder: '选择审批字段'
          }
        })
      }
      list.push({
        field: 'IsRow',
        label: '是否整行展示',
        component: 'Switch'
      })
      list.push({
        field: 'IsRed',
        label: '是否标红',
        component: 'Switch'
      })
      this.schema = list
    },
    saveMsg(msg) {
      const data = {
        Label: msg.Label,
        DataType: msg.DataType,
        Value: msg.Value,
        ColId: msg.ColId,
        Keywords: msg.Keywords,
        IsRow: msg.IsRow,
        IsRed: msg.IsRed,
        Show: null
      }
      if (this.appMsg.DataType === 1) {
        data.Show = '显示表单字段：' + this.appMsg.ColName
      } else if (this.appMsg.DataType === 2) {
        data.Show = '显示审批字段：' + this.auditDic[msg.Value]
      }
      this.$emit('save', this.id, data)
      this.$emit('update:visible', false)
    },
    async save() {
      const data = await formMethods.validate()
      if (data == null) {
        return
      }
      this.saveMsg(data)
    },
    reset() {
      if (this.source == null) {
        this.title = '新增消息模版定义'
        this.id = null
        this.appMsg = {
          Label: null,
          DataType: null,
          Value: null,
          ColId: null,
          Keywords: null,
          ColName: null,
          IsRow: false,
          IsRed: false,
          Show: null
        }
      } else {
        this.id = this.source.id
        this.appMsg = {
          Label: this.source.Label,
          DataType: this.source.DataType,
          Value: this.source.Value,
          ColName: null,
          ColId: this.source.ColId,
          Keywords: this.source.Keywords,
          IsRow: this.source.IsRow,
          IsRed: this.source.IsRed,
          Show: this.source.Show
        }
        this.title = '编辑消息模版定义'
      }
      formMethods.setValues(this.appMsg)
      this.initScheme()
    },
    closeForm() {
      this.$emit('update:visible', false)
    }
  }
}
</script>
